<template>
	<view class="page-content">
		<view class="nav-tabbar flex flex-middle">
			<view class="flex-item" v-for="(item,index) in tabbar" :key="index"
				:class="index == curr ? 'active' : ''" @click="tabChange(index)">{{ item }}</view>
		</view>
		<view class="scroll-view-wrap flex-item">
			<view class="scroll-view-inner flex">
				<view class="scroll-view" style="width: 100%;">
					<block  v-if="newsData" v-for="(newsItem,index) in newsData" :key="index"
				>
						<view class="news-list" v-if="newsItem.newsList && newsItem.newsList.length>0" v-show="curr == index">
							<view class="list-item flex flex-row b-b" v-for="(item,i) in newsItem.newsList" :key="i">
								<view class="tag">{{ i+1 }}</view>
								<view class="flex-item">
									<view class="news-title">
										{{ item.title }}
									</view>
									<view class="news-tip">
										<text>来源：{{ item.newsource }}</text>
										<text>{{ item.viewTotal || 0 }}人浏览</text>
									</view>
								</view>
							</view>
						</view>
						<view class="news-list user-list" v-if="newsItem.userList && newsItem.userList.length>0" v-show="curr == index">
							<view class="list-item flex flex-row b-b" v-for="(item,i) in newsItem.userList" :key="i">
								<view class="tag">{{ i+1 }}</view>
								<view class="flex-item flex flex-middle">
									<view class="news-title flex-item">
										{{ item.user }}
									</view>
									<view class="news-tip">
										<text>{{ item.time }}分钟</text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let _self
	export default {
		data() {
			return {
				tabbar: ['新闻热榜', '阅读排行'],
				tabIndex: 0,
				curr:0,
				isRefresh:false,
				newsData:[],
				userList:[],
			};
		},
		onLoad(){
			// this.getMineReadRanking();
			this.getMineHotNew();
			
		},
		onPullDownRefresh(){
			this.getMineHotNew();
			this.getMineReadRanking();
		},
		methods: {
			// 获取我的-新闻排行-新闻热榜
			getMineHotNew(){
				_self = this;
				let a = {};
				let newsList = [];
				let itemObject = {};
				_self.$$.request({
					url: _self.config.getMineHotNew,
					data: {
					},
					method: "POST"
				}, true, true).then((res) => {
					console.log("res",res)
					uni.stopPullDownRefresh()
					if(res.code == 2000) {
						res.data.map(item=>{
							let itemObject = {};
							itemObject.title = item.title;
							itemObject.newsource = item.newsource;
							itemObject.viewTotal = item.viewTotal;
							newsList.push(itemObject)
						})
						a.newsList = newsList;
						_self.newsData.push(a);
					_self.getMineReadRanking()
					}
					// console.log("_self.newsData",_self.newsData)
				}).catch((Error) => {
					uni.stopPullDownRefresh()
					console.log(Error.msg)
				}).finally(() => {
					console.log("complete")
				})
			},
			
			getMineReadRanking(){
				_self = this;
				let a = {};
				let userList = [];
				_self.$$.request({
					url: _self.config.getMineReadRanking,
					data: {
					},
					method: "POST"
				}, true, true).then((res) => {
					if(res.code == 2000) {
						console.log("resRanking",res)
						res.data.map(item=>{
							let itemObject = {};
							itemObject.user = item.nickName;
							itemObject.time = item.appread;
							userList.push(itemObject)
						})
						a.userList = userList;
						_self.newsData.push(a);
						console.log("_self.newsData",_self.newsData)
						uni.stopPullDownRefresh()
					}
					uni.stopPullDownRefresh()
				}).catch((Error) => {
					console.log(Error.msg)
					uni.stopPullDownRefresh()
				}).finally(() => {
					console.log("complete")
				})
			},
			
			tabChange(i) {
				this.curr = i
			},
			refresherrefresh() {
				if (this.isRefresh) return
				this.isRefresh = true
			},
			refresherrestore() {
				console.log("自定义下拉刷新被复位");
				this.isRefresh = false
			},
			refresherabort() {
				console.log("自定义下拉刷新被中止	");
				this.isRefresh = false
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	.page-content {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
	}

	.nav-tabbar {
		background: #F9F9F9;
		box-shadow: 0px 1px 0px 0px #E5E5E5;

		.flex-item {
			width: 100%;
			position: relative;
			font-size: 36upx;
			font-weight: bold;
			color: #333333;
			text-align: center;
			line-height: 100upx;

			&.active {
				color: #00A0E9;

				&::after {
					content: '';
					position: absolute;
					width: 70upx;
					left: 50%;
					bottom: 0;
					height: 4upx;
					background: #00A0E9;
					transform: translateX(-50%);
				}
			}
		}
	}
	.news-list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30upx;
	}
	.list-item {
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 0;
		
		.tag {
			margin-top: 5upx;
			margin-right: 40upx;
			width: 40upx;
			height: 40upx;
			font-size: 30upx;
			line-height: 40upx;
			color: #fff;
			text-align: center;
			border-radius: 8upx;
			background: #EAEAEA;
		}
		&:nth-child(1) .tag {
			background: #E60012;
		}
		&:nth-child(2) .tag {
			background: #F19149;
		}
		&:nth-child(3) .tag {
			background: #FACD89;
		}
	}
	.news-title {
		margin-bottom: 20upx;
		font-size: 32upx;
		color: #333333;
		line-height: 48upx;
	}
	.news-tip {
		display: flex;
		justify-content: space-between;
		font-size: 24upx;
		color: #999999;
	}
	.user-list .news-title {
		margin-bottom: 0;
	}
</style>
